<script setup>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import data from "@/untils/address/states.json"
const formLabelWidth = '100px'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Decrypt, Encrypt } from '../../untils/passjs/security';
import { AddEndUserData, getRoledata, updateaEndUser, getRoledataList } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    dialogFormVisibleDetail: Boolean,
    formlist: Object
})
const datasel = ref([]);

const states = ref([]);
const countryStates = ref({});
watchEffect(() => {

})
onMounted(() => {
    datasel.value = data.data;
    const tempCountryStates = {};
    data.data.forEach(country => {
        tempCountryStates[country.name] = country.states || [];
    });
    countryStates.value = tempCountryStates;
})
const handleCountryChange = (countryName) => {
    props.formlist.addresszhou = ''; 
    states.value = countryStates.value[countryName] || [];
};
let emits = defineEmits(["closedet", 'update:formlist'])
function closedialog(formEl) {
    if (!formEl) return
    emits("closedet")
}

let roleOptions = ref([])
function colseclose(formRef) {
    emits("closedet")
}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="dialogFormVisibleDetail" style="padding: 40px;" title="detail"
            @close="colseclose">
            <el-form :model="formlist" ref="formRef" class="two-column-form">
                <div class="form-row">
                    <!-- 用户名称 -->
                    <el-form-item label="username:" :label-width="formLabelWidth" prop="username">
                        {{formlist.username}}
                    </el-form-item>
                    <!-- 地址 -->
                    <el-form-item label="address:" :label-width="formLabelWidth" prop="account">
                        {{formlist.account}}
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- 用户昵称 -->
                    <el-form-item label="nickname:" :label-width="formLabelWidth" prop="nickname">
                        {{formlist.nickname}}
                    </el-form-item>

                    <!-- 邮箱 -->
                    <el-form-item label="email:" :label-width="formLabelWidth" prop="email">
{{formlist.email}}
                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- 手机号 -->
                    <el-form-item label="phoneNumber:" :label-width="formLabelWidth" prop="phone">
                        {{ formlist.phoneAreaCode ? `+${formlist.phoneAreaCode} ${formlist.phone}` : `${formlist.phone}` }}
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item label="gender:" :label-width="formLabelWidth" prop="gender">
                        {{ formlist.gender == 1 ? 'male' : 'female' }}
                    </el-form-item>
                </div>
                <div class="form-row">
                    <el-form-item label="location:" :label-width="formLabelWidth" prop="area">
                        <div class="address-container">
                            <span>{{ formlist.contry }}/</span>
                            <span>{{ formlist.addresszhou }}</span>
                        </div>

                    </el-form-item>
                </div>
                <div class="form-row">
                    <!-- 角色 -->
                    <el-form-item label="role:" :label-width="formLabelWidth" prop="roles">
                       {{formlist.roles ? formlist.roles.map(item => item.roleName).join(','):''}}
                    </el-form-item>
                </div>

            </el-form>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.two-column-form .form-row {
    display: flex;
    justify-content: space-between;
}
:deep(.el-form-item__label) {
  color: #333; /* 更深的颜色 */
}
.two-column-form .el-form-item {
    width: 48%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;

        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>